@model OrchardCore.ContentFields.ViewModels.EditContentPickerFieldViewModel
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.ContentFields.Settings;
@using Newtonsoft.Json;
@using Newtonsoft.Json.Serialization;
@using OrchardCore.Environment.Shell;

@inject ShellSettings ShellSettings

@{
    var settings = Model.PartFieldDefinition.Settings.ToObject<ContentPickerFieldSettings>();
    var selectedItems = Html.Raw(JsonConvert.SerializeObject(Model.SelectedItems, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }));
    var partName = Model.PartFieldDefinition.PartDefinition.Name;
    var fieldName = Model.PartFieldDefinition.Name;
    var tenantPath = string.IsNullOrEmpty(ShellSettings.RequestUrlPrefix) ? string.Empty : "/" + ShellSettings.RequestUrlPrefix;
    var vueElementId = $"ContentPicker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
    var multiple = settings.Multiple.ToString().ToLowerInvariant();
}

<script asp-src="~/OrchardCore.ContentFields/Scripts/contentPicker.js" asp-name="contentPicker" at="Foot" depends-on="vuejs, vuemultiselect"></script>
<style asp-src="~/OrchardCore.ContentFields/Styles/contentPicker.min.css" debug-src="~/OrchardCore.ContentFields/Styles/contentPicker.css"></style>
<script asp-src="https://vuejs.org/js/vue.min.js" debug-src="https://vuejs.org/js/vue.js" asp-name="vuejs" at="Foot"></script>
<script asp-src="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.js" asp-name="vuemultiselect" at="Foot"></script>
<style asp-src="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"></style>
<script asp-src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js" debug-src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.js" asp-name="sortable" at="Foot"></script>
<script asp-src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js" debug-src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.js" asp-name="vuedraggable" depends-on="vuejs, sortable" at="Foot"></script>

<label asp-for="ContentItemIds">@Model.PartFieldDefinition.DisplayName()</label>

<div id="@vueElementId" class="content-picker-default">

<fieldset class="form-group" >
    <ul class="list-group col-xl-6 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
        <draggable v-model="arrayOfItems" >
            <li v-for="(item, i) in arrayOfItems"
            class="list-group-item content-picker-default__list-item d-flex align-items-start justify-content-between" 
            :key="item.contentItemId">
                <div class="align-items-center align-self-center"><span>{{ item.displayText }}</span> <span v-show="!item.hasPublished" class="text-muted small">(@T["Not published"])</span></div>

                <div class="btn-group btn-group-sm align-items-center" role="group">
                    <button v-on:click="remove(item)" type="button" class="btn btn-secondary content-picker-default__list-item__delete" ><i class="fa fa-trash fa-sm" aria-hidden="true"></i></button>
                </div>
            </li>
        </draggable>        
    </ul>
</fieldset>

<fieldset class="form-group row">
    <div class="col-xl-6" >
        <input asp-for="ContentItemIds" type="hidden" v-model="selectedIds" />
        <vue-multiselect v-model="value" :options="options" track-by="contentItemId"
                         label="displayText" placeholder="@T["Type to search"]"
                         @@search-change="asyncFind" @@select="onSelect"
                         :searchable="true" :close-on-select="true" :reset-after="true"
                         :show-labels="true" :hide-selected="@multiple"
                         :disabled="isDisabled"
                         select-label="@T["Select"]" deselect-label="@T["Remove"]">
            <template slot="option" slot-scope="props">
                <div  v-cloak><span>{{ props.option.displayText }}</span><span class="small ml-2" v-show="!props.option.hasPublished">(@T["Not published"])</span></div>
            </template>
            <template slot="noResult">@T["No result found"]</template>
        </vue-multiselect>
        @if (!String.IsNullOrEmpty(settings.Hint))
        {
            <span class="hint">@settings.Hint</span>
        }
    </div>
</fieldset>
    
</div>
<script at="Foot">
    initializeContentPickerFieldEditor('@vueElementId', @selectedItems, '@tenantPath', '@partName', '@fieldName', @multiple.ToLowerInvariant());
</script>
